<script setup>

import Tab from "@/apps/client/layout/Tab.vue";
import {toPage} from "@/apps/client/utils/routerUtil.js";
import {getUserInfo} from "@/apps/client/utils/userApi.js";
import {ref} from "vue";

const realName = ref(null)
const points = ref(null)

realName.value = sessionStorage.getItem("realName")
points.value = sessionStorage.getItem("points")
</script>

<template>
  <div class="home1" style="height: 100vh;">
    <div class="home2" style="height: 100vh">

    <van-space direction="vertical" fill>
      <div style="height: 10px;"></div>

      <van-cell-group inset>
        <van-cell>
          <div style="display: flex; align-items: center;">
            <!-- 左侧头像 -->
            <van-image round width="4rem" height="4rem" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
            <!-- 右侧文字 -->
            <div style="display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 0 20px">
              <div>
                <span style="font-weight: bold; font-size: 16px; color: black">{{  realName }}</span>
                <span style="font-weight: bold; font-size: 16px; color: black">，你好</span>
              </div>
              <div>
                <span style="font-size: 14px; color: black">积分：</span>
                <span style="font-size: 14px; color: #46afff">{{ points }}</span>
              </div>
            </div>
          </div>
        </van-cell>
      </van-cell-group>

      <van-cell-group inset>
        <van-cell title="我的预约" icon="todo-list-o" class="custom-cell" @click="toPage('myReservation')"/>
        <van-cell title="我的借还" icon="todo-list-o" class="custom-cell" @click="toPage('instrumentReturnRecord')"/>
      </van-cell-group>



    </van-space>
      <Tab style="margin: 0 10px"/>
  </div>
  </div>
</template>

<style scoped>
.custom-cell {
  --van-cell-font-size: 1rem;
  --van-cell-icon-size: 1.8rem;
  --van-cell-vertical-padding: 20px;
}
.home1 {
  background-image: linear-gradient(32deg, #3551a4 0%, #2c8ec4 29%, #31c4cd 59%, #2c8ec4 100%);

}
.home2 {
  background-image: url('@/assets/home-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: space-between;
  display: flex;
  flex-direction: column;

}
</style>